<template>
  <div class="coupon">
    <div class="header">
      <van-nav-bar title="优惠卷" left-text="返回" left-arrow @click-left="onClickLeft" />
      <van-notice-bar
        :text="'你有'+couponNum+'张优惠卷可用'"
        background="#33363d"
        color="#ffffff"
        class="header-tips"
      />
    </div>
    <div class="main" ref="scrl">
        <ul class="coupon-box">
          <li
            :class="item.state?'coupon-fine':'coupon-bad'"
            v-for="item in couponlist"
            :key="item.id"
            class="coupan-card"
          >
            <div class="text">
              <p>{{item.title}}</p>
              <p>{{item.text}}</p>
              <p>{{item.time}}</p>
            </div>
            <div class="state">
              <p>{{item.price}}元</p>
              <p v-if="item.state">购票</p>
              <img src="@/assets/images/user/overdue.png" v-else alt />
            </div>
          </li>
        </ul>
    </div>
    
    <router-link to="/movie" tag="div" class="floot">
      <p class="text" @click="go">去购票</p>
      <van-icon name="arrow" color="#ffffff" size="20" />
    </router-link>
  </div>
</template>

<script>
import "@/assets/css/reset.css";
import BScroll from '@better-scroll/core'
export default {
  data() {
    return {
      num: 0,
      couponlist: [
        {
          state: true,
          id: Math.random(),
          title: "电影专享代金券",
          time: "有效期至： 2018-04-11",
          text: "购票即可抵扣 快去购票",
          price: 5
        },
        {
          state: true,
          id: Math.random(),
          title: "电影专享代金券",
          time: "有效期至： 2018-04-11",
          text: "购票即可抵扣 快去购票",
          price: 5
        },
        {
          state: true,
          id: Math.random(),
          title: "电影专享代金券",
          time: "有效期至： 2018-04-11",
          text: "购票即可抵扣 快去购票",
          price: 5
        },
        {
          state: false,
          id: Math.random(),
          title: "电影专享代金券",
          time: "有效期至： 2018-04-11",
          text: "购票即可抵扣 快去购票",
          price: 5
        },
        {
          state: false,
          id: Math.random(),
          title: "电影专享代金券",
          time: "有效期至： 2018-04-11",
          text: "购票即可抵扣 快去购票",
          price: 5
        },
        {
          state: false,
          id: Math.random(),
          title: "电影专享代金券",
          time: "有效期至： 2018-04-11",
          text: "购票即可抵扣 快去购票",
          price: 5
        }
      ]
    };
  },
  computed: {
    couponNum() {
      return this.couponlist.filter(ele => ele.state == true).length;
    }
  },
  created() {},
  mounted() {
    //插件初始化
    let wrapper = this.$refs.scrl
    this.bScroll = new BScroll(wrapper,{
        click:true
    })
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    go() {
      this.$router.push("/ticket");
    }
  }
};
</script>

<style lang="scss">
[class*="van-hairline"]::after {
  position: static;
}

.van-nav-bar {
  background-color: #23262d!important;
  margin-top: 0px;
  .van-nav-bar__title {
    color: #ffffff;
  }
}
.van-nav-bar__text {
  color: #ffffff;
}
.van-nav-bar .van-icon {
  color: #ffffff;
}
</style>
<style scoped lang="scss" scoped>
.coupon{
  overflow: hidden;
  background-color: #23262d;
}
.main{
  height: 712px;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}
.header-tips {
  transform: translateY(-2px);
}
.floot {
  width: 375px;
  height: 70px;
  background: rgba(44, 47, 54, 1);
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
}
.coupon-box {
  width: 95%;
  margin: 0 auto;
  margin-top: 100px;
}
.coupan-card {
  width: 100%;
  height: 120px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: #ffffff;
  .text {
    font-size: 12px;
    line-height: 17px;
    color: #7d7d7d;
    p:nth-child(1) {
      font-size: 18px;
      line-height: 25px;
      color: #ffffff;
    }
  }
  .state {
    width: 60px;
    height: 60px;
    p {
      font-size: 24px;
      line-height: 33px;
    }
    p:nth-child(2) {
      font-size: 18px;
      line-height: 25px;
    }
    img {
      transform: translateY(-20px) translateX(15px);
      width: 55px;
      height: 55px;
    }
  }
}
.coupon-fine {
  background: url(~@/assets/images/user/couponFind.png) no-repeat center;
  background-size: auto 100%;
}
.coupon-bad {
  background: url(~@/assets/images/user/couponBad.png) no-repeat center;
  background-size: auto 100%;
}
</style>
